<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="queryParams.keywords"
            placeholder="请输入关键字"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="是否有工资卡" prop="hasBankCard">
          <el-select v-model="queryParams.hasBankCard" clearable placeholder="请选择">
            <el-option label="有" :value="true" />
            <el-option label="无" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否签订劳动合同" prop="hasContract">
          <el-select v-model="queryParams.hasContract" clearable placeholder="请选择">
            <el-option label="已签订" :value="true" />
            <el-option label="未签订" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item label="工人工种" prop="type">
          <el-select v-model="queryParams.type" clearable placeholder="请选择">
            <el-option
              v-for="item in projectGropuMemberTypeWork"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="进出场状态" prop="status">
          <el-select v-model="queryParams.status" clearable placeholder="请选择">
            <el-option
              v-for="item in constructionStatus"
              :key="item.value"
              :label="item.label == '进场' ? '在场' : '离场'"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <i-ep-search />
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <i-ep-refresh />
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <el-form-item>
        <el-button type="primary" :loading="download_loading" @click="download()"><i-ep-download />导出</el-button>
      </el-form-item>
      <el-table v-loading="loading" :data="tableList" highlight-current-row border>
        <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
        <el-table-column
          v-if="userType != 'Manager'"
          key="projectName"
          label="所属项目"
          min-width="150"
          align="center"
          prop="projectName"
        />
        <el-table-column
          v-if="userType != 'Manager'"
          key="projectName"
          label="项目编号"
          min-width="150"
          align="center"
          prop="projectNum"
        />
        <el-table-column key="name" label="姓名" min-width="90" align="center" prop="name" />
        <el-table-column key="corpName" label="所属企业" min-width="130" align="center" prop="corpName" />
        <el-table-column key="sex" label="性别" min-width="80" align="center" prop="sex" />
        <el-table-column key="cardNumber" label="身份证号" min-width="130" align="center" prop="cardNumber" />
        <el-table-column key="mobile" label="联系电话" min-width="90" align="center" prop="mobile" />
        <el-table-column key="groupName" label="所在班组" min-width="90" align="center" prop="groupName" />
        <el-table-column key="workTypeName" label="工作类型" min-width="90" align="center" prop="workTypeName" />
        <el-table-column key="address" label="家庭住址" min-width="160" align="center" prop="address" />
        <!-- <el-table-column key="hasBankCard" label="是否有工资卡" min-width="90" align="center" prop="hasBankCard" /> -->
        <el-table-column label="是否有工资卡" min-width="90" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.hasBankCard ? 'success' : 'danger'">{{
              scope.row.hasBankCard ? "有" : "无"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否签订劳动合同" min-width="110" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.hasContract ? 'success' : 'danger'">{{
              scope.row.hasContract ? "已签订" : "未签订"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column key="startDate" label="进场日期" min-width="80" align="center" prop="startDate" />
        <el-table-column key="endDate" label="离场日期" min-width="80" align="center" prop="endDate" />
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageIndex"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
/**引入文件**/
import { computed } from "vue";
import { useScreen } from "@/store/modules/screen";
import { getDicts } from "@/store/modules/dict";
import moment from "moment";

import { UseEmployeeDto, ParamsType } from "@/api/employee/types";
import { getProjectGroupMemberList, downloadGroupMembers } from "@/api/employee/index";
import { downloadFile } from "@/utils";

/**声明变量**/
const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenHeight = ref(100);

const projectGropuMemberTypeWork = getDicts("projectGropuMemberTypeWork");

const constructionStatus = getDicts("constructionStatus");

const total = ref(0);
const loading = ref(false);
const queryFormRef = ref(ElForm);
const tableList = ref<UseEmployeeDto[]>();
const queryParams = reactive<ParamsType>({
  pageIndex: 1,
  pageSize: 20,
});
const userType = localStorage.getItem("usertypeName");
const download_loading = ref(false);
/**声明函数**/
// 初始化窗体
function initScreen() {
  if (mobile.value === "mobile") {
    screenHeight.value = screenStore.screenHeight;
  } else {
  }
}

/* 列表查询 */
async function handleQuery() {
  loading.value = true;

  let list = await getProjectGroupMemberList(queryParams);
  if (list.type === 0) {
    if (list.success) {
      tableList.value = list.data.list;
      total.value = list.data.total;
      queryParams.pageIndex = list.data.pageNum;
      queryParams.pageSize = list.data.pageSize;
    } else {
      ElMessage.error(list.msg);
    }
  } else {
    ElMessage.error(list.msg);
  }
  loading.value = false;
}

/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageIndex = 1;
  queryParams.pageSize = 20;
  handleQuery();
}

//生命周期事件

onMounted(async () => {
  initScreen();
  handleQuery();
});

function download() {
  download_loading.value = true;
  downloadGroupMembers(queryParams).then((response: any) => {
    if (!response.headers["content-disposition"]) {
      const decoder = new TextDecoder("utf-8");
      const resp = decoder.decode(response.data);
      let objResp = JSON.parse(resp);
      ElMessage.error(objResp.msg);
      download_loading.value = false;
      return;
    }

    downloadFile(response);
    download_loading.value = false;
  });
}
</script>
<style lang="less" scoped></style>
